<template>
  <div class="seach-box dis-flex flex-wrap flex-y-center flex-x-between" :class="search.classNanme">
    <div class="dis-flex flex-wrap flex-y-center" :class="search.classNanme">
      <label v-if="search.label" class="seach-name">{{ search.label }}:</label>
      <template v-for="(item, index) in search.options">
        <!-- 输入框 Input -->
        <el-input v-if="item.tag === 'Input'" :key="index+new Date().getTime()" v-model="search.model[item.prop]" :placeholder="item.placeholder" clearable :size="search.size" />
        <!-- 选择框 Select -->
        <el-select v-if="item.tag === 'Select'" :key="index+Math.random()*100" v-model="search.model[item.prop]" :placeholder="item.placeholder" filterable :size="search.size">
          <el-option value="" :label="'请选择'+item.placeholder" />
          <el-option v-for="items in item.data" :key="items[item.showPropData.value]" :label="items[item.showPropData.label]" :value="items[item.showPropData.value]" />
        </el-select>
        <!-- 时间选择器 DatePicker -->
        <el-date-picker v-if="item.tag === 'DatePicker'" :key="index +Math.random()*100" v-model="search.model[item.prop]" :type="item.type" :placeholder="item.placeholder" :value-format="item.format" :size="search.size" />
      </template>
      <el-button type="primary" icon="el-icon-search" size="small" @click="confirm">搜索</el-button>
      <el-button icon="el-icon-refresh-left" size="small" @click="empty">重置</el-button>
    </div>
    <slot />
  </div>
</template>
<script>
export default {
  name: 'HeadSeach',
  data() {
    return {
      seachCard: {
        search: {
          width: '',
          label: '', // 搜索名称
          classNanme: '', // 样式名称
          size: ''
        },
        options: {
          placeholder: '',
          endPlaceholder: '',
          startPlaceholder: '',
          rangeSeparator: '',
          format: 'yyyy-MM-dd HH:mm:ss', // 时间显示格式
          multiple: false
        }
      },
      search: {
        model: {},
        options: [{
          tag: '', // Input --输入框 Select--选择框 DatePicker --时间选择
          type: '',
          width: '', // 每个搜索框的宽度
          prop: '', // 绑定对应标签的变量名
          data: [], // 初始化需要的数据  Select标签使用时需要用到
          showPropData: {
            label: '',
            value: ''
          } // Select显示的变量
        }]
      }
    }
  },
  methods: {
    init(data) {
      this.search = { ...this.seachCard.search, ...data }
      this.search.options = this.search.options.map(item => {
        return { ...this.seachCard.options, ...item }
      })
    },
    // 确认搜索
    confirm() {
      this.search.cb(this.search.model)
    },
    // 清空
    empty() {
      for (const key in this.search.model) {
        this.search.model[key] = ''
      }
      this.confirm()
    }
  }
}
</script>
